// ------------------------------------------------------------------
// Base layout rules, use 'webclient.less' for styling
// ------------------------------------------------------------------
html {
    height: 100%;

    .o_web_client {
        height: 100%;
        .o-flex-display();
        .o-flex-flow(column, nowrap);
        @media (max-width: @screen-xs-max) {
            overflow: auto;  // scrollbar if necessary
        }

        &.o_fullscreen {
            .o_main_navbar {
                display: none;
            }
        }

        .o_main_navbar {
            .o-flex(0, 0, auto);
        }

        .o_control_panel {
            .o-flex(0, 0, auto);
        }

        .o_content {
            .o-flex(1, 1, auto);
            @media (min-width: @screen-sm-min) {
                overflow: auto;
                height: 100%;
            }
            position: relative;  // Allow to redistribute the 100% height to its child
            @media (max-width: @screen-xs-max) {
                overflow: visible;
                height: auto;
            }

            .o_view_manager_content {
                position: absolute;  // Get the 100% height of its flex parent
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                height: 100%;
                &.o_form_field {
                    @media (max-width: @screen-xs-max) {
                        position: static;  // reset the height 100% distribution on flex item
                        height: auto;  // reset height inheritance
                    }
                }

                .o_view_manager_content {
                    position: static;  // Reset position for nested view managers
                    height: auto;  // reset height inheritance for nested view managers
                }
            }
        }
    }

    .o_loading {
        position: fixed;
        bottom: 0;
        right: 0;
    }
}

@media print {
    html .o_web_client .o_content {
        position: static;
        overflow: visible;
        height: auto;
    }
}
